<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fregments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>支付</title>
    <!-- <link rel="stylesheet" href="static/lib/bootstrap-4.6.2/bootstrap.min.css"> -->
    <link rel="stylesheet" href="../static/css/style.css">
    <link rel="stylesheet" href="../static/lib/layui/css/layui.css">
    <script src="../static/lib/jquery-3.5.1.min.js"></script>
    <script src="../static/lib/layui/layui.js"></script>
    <!-- <script src="static/lib/bootstrap-4.6.2/bootstrap.min.js"></script> -->

</head>

<body>
<!-- 导航栏 -->
<ul th:replace="_fregments :: nav(0)" class="layui-nav m-pl-sm m-pr-sm" lay-filter="">
    <img src="../static/favicon.ico" width="20px">
    <a href="#" class="logo">
        &nbsp;挚夕影院
    </a>
    <li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-home">&nbsp;</i>首页</a></li>
    <li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-windows">&nbsp;</i>电影</a></li>
    <li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-link">&nbsp;</i>影院</a></li>
    <li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-tabs">&nbsp;</i>榜单</a></li>
    <span style="display: inline-block; width: 60%;">
            <div style="display: flex; padding-left: 20px;">
                <input type="text" name="title" required lay-verify="required" placeholder="找电影、影院"
                       autocomplete="off"
                       class="layui-input" style="width: 300px;">
                <button class="layui-btn" lay-submit lay-filter="formDemo"><i
                        class="layui-icon layui-icon-search">&nbsp;</i></button>
            </div>
        </span>

    <li class="layui-nav-item" style="text-align: right!important;">
        <a href=""><img src="../static/images/me.jpg" class="layui-nav-img"></a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:;">修改信息</a></dd>
            <dd><a href="javascript:;">安全管理</a></dd>
            <dd><a href="javascript:;">退出</a></dd>
        </dl>
    </li>

</ul>

<!-- 内容 -->
<div class="layui-container" style="width: 100%; margin: 0%; padding: 0%;">
    <!-- 步骤条 -->
    <div class="layui-row">
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
            <div id="steps" style="margin-left: 10%; padding-top: 50px;"></div>
        </div>
    </div>
    <!-- 下面正文 -->
    <div style="margin-left: 10%; margin-right: 10%;  margin-top: 50px;">

        <div class="layui-row">
            <!-- rgb(236, 233, 184) -->
            <div style="background-color: #eeeeee; padding: 15px;">
                <img th:src="@{/images/money.png}" src="../static/images/money.png" width="50px">
                <div style="color: orange; display: inline; font-size: 18px;">
                    待支付
                </div>
            </div>
        </div>
        <!-- 订单信息 -->
        <div class="layui-row">
            <div class="layui-col-xs12 layui-col-sm4 layui-col-md4 m-mt">
                订单编号:
                <span th:text="${sessionVO.id}">56</span>
            </div>
            <div class="layui-col-xs12 layui-col-sm4 layui-col-md8 m-mt">
                <div style="display: flex; justify-content: right;">
                    <div>
                        (有订单问题可拨打客服电话
                        <span class="m-tc-red" th:text="${sessionVO.phone}">1111-1111</span>
                        ，工作时间: 9:00-24:00)
                    </div>
                </div>
            </div>
        </div>
        <!-- 放映厅列表 -->
        <table class="layui-table" lay-even lay-skin="nob">
            <thead>
            <tr>
                <th>影片</th>
                <th>影院</th>
                <th>时间</th>
                <th>放映厅</th>
                <th>座位</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td th:text="${sessionVO.movie.name}">
                    送你一朵小红花
                </td>
                <td th:text="${sessionVO.cinema.name}">
                    万达影城（经开万达广场店）
                </td>
                <td class="m-tc-red" th:text="${#dates.format(sessionVO.date, 'yyyy-MM-dd HH:mm:ss')}">
                    2023-11-24 13:00
                </td>
                <td th:text="${sessionVO.hall.name}">
                    1号激光厅
                </td>
                <td>
                    <span th:each="seat : ${seats}">
                        <span th:text="${seat[0] + 1}">3</span>排
                        <span th:text="${seat[1] + 1}">4</span>座
                        &nbsp;&nbsp;
                    </span>
                </td>
            </tr>
            </tbody>
        </table>
        <div style="margin-top: 50px;">

        </div>
        <div class="layui-row">
            <div class="layui-col-xs12 layui-col-sm12 layui-col-md8">
                <div th:text="${sessionVO.cinema.name}" class="m-tc-black m-ts">
                    万达影城（经开万达广场店）
                </div>
                <div class="m-mt">
                    地址:
                    <span th:text="${sessionVO.cinema.address}">金州区经济技术开发区辽河西路117号万达广场四楼</span>
                </div>
                <div>
                    电话:
                    <span th:text="${sessionVO.phone}">13111212312</span>
                </div>
            </div>
            <div class="layui-col-xs12 layui-col-sm12 layui-col-md4" style="text-align: right; margin-top: 70px;">
                    <span>
                        总价：
                        <span th:text="${session.totalPrice}" class="m-tc-red m-ts">246.0</span>
                    </span>
            </div>
        </div>
        <div class="layui-row" style="text-align: right; margin-top: 30px;">
            <button id="payBtn" class="layui-btn layui-btn-primary layui-border-blue">
                立即支付
            </button>
        </div>
    </div>


</div>
<!--/*/<th:block th:replace="_fregments::script">/*/-->
<script src="../static/lib/jquery-3.5.1.min.js"></script>
<script src="../static/lib/layui/layui.js"></script>
<!--/*/</th:block>/*/-->
<script>
    $(function (){
        layui.use(function () {
            var layer = layui.layer
                , form = layui.form,
                element = layui.element,
                carousel = layui.carousel;


            //建造实例
            carousel.render({
                elem: '#carousel1'
                , width: '100%' //设置容器宽度
                , height: '300px'
                , arrow: 'always' //始终显示箭头
                , autoplay: false
                , indicator: 'none'
                //,anim: 'updown' //切换动画方式
            });
            // layer.msg('Hello World');
            var rate = layui.rate;
            var ins1 = rate.render({
                elem: '#score',  //绑定元素
                length: 10,
                value: 9.3,
                half: true,
                readonly: true
            });
        });
        layui.extend({steps: '[[@{/lib/layui/extends/steps/steps}]]'});
        layui.use('steps', function () {
            var steps = layui.steps;
            steps.render({
                ele: '#steps',
                data: [
                    {'title': "第一步", "desc": "选择影片场次"},
                    {'title': "第二步", "desc": "选择座位"},
                    {'title': "第三步", "desc": "付款"},
                    {'title': "第四步", "desc": "取票观影"}
                ], //desc 不是必须
                current: 2 //默认为第几步
            });
            // steps.next(); //下一步
        });
        //付款
        $("#payBtn").click(function (){
            $.ajax({
                url: '[[@{/pay}]]',
                type: 'post',
                success: function (response) {
                    if (response.status == 'success') {
                        layer.msg('支付成功，可以前往个人中心查看订单信息')
                    } else {
                        layer.msg('操作失败')
                    }
                },
                error: function (response) {
                    layer.msg('未知错误')
                }
            })
        })
    })
</script>
</body>

</html>